<!--
 * @Author: daidai
 * @Date: 2022-02-20 16:16:42
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2022-10-25 09:18:22
 * @FilePath: \web-pc\src\pages\big-screen\view\indexs\left-center.vue
-->
<template>
  <div v-if="pageflag" class="chart-container">
    <div class="list" style="margin-top: 0;">
      <div class="list-header">
        <div class="no">序号</div>
        <div class="first">线路名称</div>
        <div class="second">车次</div>
        <div class="last">吨位</div>
        <div class="most">交易额</div>
      </div>
      <div class="list-body">
        <vue-seamless-scroll :data="tableData" :class-option="defaultOption">
          <div class="list-item" v-for="(item, index) in tableData" :class="index % 2 == 1 ? ' deep_color' : ''"
            :key="index">
            <div class="first"><span class="sapn-icon">{{ index + 1 < 10 ? '0' + (index + 1) : index + 1 }}</span><span
                    class="span-text">{{ item.waybillname }}</span></div>
            <div class="second">{{ item.waybillNum }}</div>
            <div class="last">{{ item.waybillCompleteNum }}</div>
            <div class="most">{{ item.waybillDeepNum }}</div>
          </div>
        </vue-seamless-scroll>
      </div>
    </div>
  </div>
  <Reacquire v-else @onclick="getData" style="line-height: 200px">
    重新获取
  </Reacquire>
</template>

<script>
import vueSeamlessScroll from 'vue-seamless-scroll'

export default {
  components: {
    vueSeamlessScroll
  },
  data() {
    return {
      options: {},
      tableData: [
        { waybillname: '青岛-临沂', waybillNum: 321, waybillCompleteNum: 12731, waybillDeepNum: 6367 + '万' },
        { waybillname: '日照-临沂', waybillNum: 314, waybillCompleteNum: 7524, waybillDeepNum: 3761 + '万' },
        { waybillname: '嘉兴-临沂', waybillNum: 307, waybillCompleteNum: 879, waybillDeepNum: 428 + '万' },
        { waybillname: '长治-临沂', waybillNum: 289, waybillCompleteNum: 521, waybillDeepNum: 260 + '万' },
        { waybillname: '宁波-临沂', waybillNum: 276, waybillCompleteNum: 169, waybillDeepNum: 85 + '万' }
      ],
      pageflag: true,
      timer: null,
    };
  },
  computed: {
    defaultOption() {
      return this.$store.state.setting.defaultOption;
    }
  },
  created() {
    this.getData();
  },
  mounted() { },
  beforeDestroy() {
    this.clearData();
  },
  methods: {
    cellStyle({ row }) {
      var styleJson = {
        background: '#03162C',
        color: '#fff',
        'text-align': 'center'
      }
      // if (row.vehicleNo==this.currentRowId) {
      //   styleJson.backgroundColor = 'rgb(24, 58, 182, 1)'
      // }else{
      //   styleJson.backgroundColor = 'rgb(0, 0, 50, 1)'
      // }
      return styleJson;
    },
    clearData() {
      if (this.timer) {
        clearInterval(this.timer);
        this.timer = null;
      }
    },
    getData() {
      // /tran/bigScreen/queryVehicleInfo
      var vm = this
      var params = {
        queryValue: vm.queryValue
      }
      // vm.axios.post('/tran/bigScreen/queryVehicleInfo', params).then(res => {
      //   console.log(res.data)
      //   if (res.success) {
      //     vm.tableData = res.data
      //     // if(res.data){
      //     //   var row = res.data[0]
      //     //   console.log(row)
      //     //   vm.$emit('fatherMethod', row.vehicleNo,row);
      //     // }
      //     return
      //   }
      //   Message.error(res.msg)
      // })
    },
  },
};
</script>
<style lang="scss" scoped>
.chart-container {
  position: relative;
  display: flex;
  justify-content: center;
  // width: 600px;
  height: 100%;

  .el-table {
    background: none;

    tr {
      background: none;
    }
  }

  .box {
    position: absolute;
    top: 16px;
    left: 10px;
    width: 400px;
    height: 70px;
    z-index: 0;
    // border: 1px solid red;
    display: flex;
    justify-content: space-between;

    .box-info {
      // border: 1px solid red;
      width: 100px;
      // line-height: 78px;
      text-align: center;
      color: #fff;
      font-size: 14px;
      font-weight: 500;
      // padding-left: 50px;

      background: url('../../../assets/img/launch/home/rcc_bg.png') no-repeat center;
      // background-size: cover;
      background-size: 80% 80%;

      .light {
        margin-top: -10px;
        margin-bottom: 10px;
        // padding-left: 10px;
        color: #ffb507;
        font-size: 20px;
        font-weight: 600;
        // font-family: 'YouSheBiaoTiHei';
      }
    }
  }

  .left_center_inner,
  .bg {
    // margin-left: -50px;
    margin-top: 10px;
    width: 100%;
    height: 100%;
  }

  .left_center_inner {
    position: absolute;
    top: 5px;
    left: -166px;
    // width: calc(100% + 100px);
    z-index: 1;
  }

  .bg {
    position: absolute;
    bottom: 2px;
    left: 22%;
    // z-index: -1;
    width: 270px;
    height: 185px;
    background: no-repeat center;
    background-image: url('../../../assets/img/launch/pie_bg1.png');
    background-size: 100% 100%;
    transform: translateX(-50%);
  }

  .list {
    width: calc(100% - 48px);
    margin: 18px 23px;

    .list-header {
      width: calc(100% - 2px);
      ;
      display: flex;
      justify-content: space-around;
      align-items: center;
      border: 1px solid #153C81;
      background: #03162C;
      height: 32px;
      line-height: 32px;

      div {
        width: 23%;
        text-align: center;
      }

      .no {
        width: 50px;
        text-align: right;
        // border: 1px solid red;
      }

      .first {
        width: 22%;
      }
    }

    .list-body {
      // border: 1px solid red;
      width: 100%;
      height: 128px;
      overflow: hidden;
    }

    .list-item {
      width: calc(100% - 2px);
      display: flex;
      justify-content: space-around;
      align-items: center;
      background: #03162C;
      border: 1px solid #153C81;
      height: 32px;
      line-height: 32px;
      margin-top: 10px;

      div {
        width: 23%;
        text-align: center;
        font-weight: 500;
        display: flex;
        justify-content: center;
        align-items: center;
      }

      .first {
        width: 30%;
        display: flex;
        justify-content: space-around;
        align-items: center;
        margin-left: 10px;

        .sapn-icon {
          width: 24px;
          height: 24px;
          background: url('../../../assets/img/launch/internet/icon.png') no-repeat center;
          background-size: 24px 24px;
          display: flex;
          align-items: center;
          justify-content: center;
        }

        .span-text {
          margin-left: 9px;
          display: flex;
          justify-content: center;
          align-items: center;
        }
      }
    }
  }

}
</style>